<template>
  <HRDialog
    :dialogVisable="dialogVisible"
    @handleClose="handleClose"
    @handleConfirm="handleConfirm"
  >
    <el-link type="primary" underline style="margin-bottom: 10px"
      >请点击下载导入模板</el-link
    >
    <el-upload
      class="upload-demo"
      :accept="accept"
      :drag="drag"
      :action="uploadUrl"
      :multiple="multiple"
    >
      <el-icon class="el-icon--upload"><upload-filled /></el-icon>
      <div class="el-upload__text">将文件拖到此处，或 <em>点击上传</em></div>
      <template #tip>
        <div class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
      </template>
    </el-upload>
  </HRDialog>
</template>

<script setup>
import { UploadFilled } from "@element-plus/icons-vue";
import HRDialog from "@/components/HRDialog";

import { ref, watch } from "vue";
const props = defineProps({
  //是否显示dialog
  uploadVisable: {
    type: Boolean,
    default: false,
  },
  //上传文件的接口地址
  uploadUrl: {
    type: String,
    default: "",
  },
  //是否开启拖动上传文件
  drag: {
    type: Boolean,
    default: true,
  },
  //是否开启多个文件上传
  multiple: {
    type: Boolean,
    default: true,
  },
  //支持的上传文件类型
  accept: {
    type: String,
    default: ".xls,.xlsx,.doc,.docx",
  },
  //关闭按钮的标题
  cancleTitle: {
    type: String,
    default: "取消",
  },
  //确认按钮的标题
  confirmTitle: {
    type: String,
    default: "保存",
  },
  //头部标题
  title: {
    type: String,
    default: "",
  },
});

const emit = defineEmits(["handleClose", "handleConfirm"]);
const dialogVisible = ref();

watch(
  () => props.uploadVisable,
  (value) => {
    dialogVisible.value = value;
  }
);
//关闭按钮回调方法
const handleClose = () => {
  emit("handleClose");
};

//确认按钮回调方法
const handleConfirm = () => {
  emit("handleConfirm");
};
</script>
